import 'package:flutter/material.dart';

class ProductsView extends StatefulWidget {
  final double width;
  final String text;
  final String image01;
  final String image02;

  ProductsView({Key key, this.width, this.image01, this.image02, this.text = ''})
      : super(key: key);

  @override
  _ProductsViewState createState() => _ProductsViewState();
}

class _ProductsViewState extends State<ProductsView> {
  bool isExpand = false;

  @override
  Widget build(BuildContext context) {
    return MouseRegion(
      onEnter: (_) {
        setState(() {
          isExpand = true;
        });
      },
      onExit: (_) {
        setState(() {
          isExpand = false;
        });
      },
      child: AnimatedContainer(
        duration: Duration(milliseconds: 200),
        alignment: Alignment.center,
        margin: EdgeInsets.only(left: isExpand?0:3,bottom: isExpand?0:3),
        decoration: BoxDecoration(
            color: Colors.white,
            boxShadow: [
          isExpand
              ? BoxShadow(
                  color: Colors.grey,
                  blurRadius: 5, //阴影范围
                  spreadRadius: 0, //阴影浓度
                )
              : BoxShadow(
                  color: Colors.white,
                  blurRadius: 5, //阴影模糊程度
                  spreadRadius: 0 //阴影扩散程度
                  )
        ]),
        child: Stack(
          alignment: Alignment.bottomCenter,
          children: [
            isExpand
                ? Image.network(
                    widget.image02,
                    fit: BoxFit.fill,
                  )
                : Image.network(
                    widget.image01,
                    fit: BoxFit.fill,
                  ),
            Positioned(
              bottom: 10,
              child: Text(
                widget.text,
                style: TextStyle(
                  fontSize: 30,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}


class EcologyView extends StatefulWidget {
  final String image01;
  final String image02;

  EcologyView({this.image01, this.image02,});

  @override
  _EcologyViewState createState() => _EcologyViewState();
}

class _EcologyViewState extends State<EcologyView> {
  bool isExpand = false;

  @override
  Widget build(BuildContext context) {
    return MouseRegion(
      onEnter: (_) {
        setState(() {
          isExpand = true;
        });
      },
      onExit: (_) {
        setState(() {
          isExpand = false;
        });
      },
      child: AnimatedContainer(
        width: 320,
        duration: Duration(milliseconds: 200),
        alignment: Alignment.center,
        margin: EdgeInsets.only(left: isExpand?0:1,bottom: isExpand?0:1),
        decoration: BoxDecoration(
            color: Colors.white,
            boxShadow: [
              isExpand
                  ? BoxShadow(
                color: Colors.grey,
                blurRadius: 5, //阴影范围
                spreadRadius: 0, //阴影浓度
              )
                  : BoxShadow(
                  color: Colors.white,
                  blurRadius: 0, //阴影模糊程度
                  spreadRadius: 0 //阴影扩散程度
              )
            ]),
        child: Stack(
          alignment: Alignment.bottomCenter,
          children: [
            isExpand
                ? Image.network(
              widget.image01,
              fit: BoxFit.fill,
            )
                : Image.network(
              widget.image02,
              fit: BoxFit.fill,
            ),

          ],
        ),
      ),
    );
  }
}
